<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            margin: 0 auto;
            font-size: 14px;
            border: 1px solid gray;
            margin-top: 50px;
            border-collapse: collapse;
            text-align: center;
        }
        
        thead {
            background-color: teal;
            color: white;
        }
        
        tr,
        td {
            border: 1px solid gray;
        }
        
        #list {
            display: none;
        }
    </style>
</head>

<body>
    <table border="1px" cellspacing="0" class="table  table-hover">
        <thead>
            <tr>
                <td>标识符</td>
                <td>目的地</td>
                <td>出发</td>
                <td>到达</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="tbody">
            <tr id="list">
                <td class="airNo"></td>
                <td class="destination"></td>
                <td class="DepTime"></td>
                <td class="landTime"></td>
                <td class="edit">
                    <button class="insert" style="background-color: turquoise;color: white;">插入</button>
                    <button class="delete" style="background-color: plum; color: white;">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

</body>

</html>
<!-- <script src="flightList.js"></script> -->
<script>
    // function ajax(method, url, callback) {

    //     let http = new XMLHttpRequest();
    //     http.open(method, url);
    //     http.send();
    //     http.onreadystatechange = function() {
    //         if (http.readyState === 4) {
    //             callback(http.responseText)
    //         };
    //     }

    // }
    // 编写ijaxs
    let list = document.getElementById("list");
    let tbody = document.getElementsByTagName("tbody")[0]
    let http = new XMLHttpRequest();
    // 请求地址是81号端口的地址
    http.open("get", "http://10.35.164.168:81/flightList");
    http.send()
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            // 接受来自数据库的数据成功后：
            let flights = JSON.parse((http.responseText));
            // 克隆

            flights.forEach(function(item) {
                let newlist = list.cloneNode(true);
                newlist.id = "";
                tbody.appendChild(newlist);
                newlist.querySelector(".airNo").innerHTML = item.airNo;
                newlist.querySelector(".destination").innerHTML = item.destination;
                newlist.querySelector(".DepTime").innerHTML = item.DepTime;
                newlist.querySelector(".landTime").innerHTML = item.landTime;
                // item.id是属性值
                newlist.setAttribute("data-id", item.id)

            });
        }


    }
    tbody.onclick = function(evt) {
        let e = evt || event;
        let target = evt.target;
        // 删除键
        if (target.innerHTML === "删除") {
            let id = target.parentNode.parentNode.getAttribute("data-id")
            if (confirm("确定要删除吗？")) {
                let http = new XMLHttpRequest();
                // 请求地址是删除号端口的地址
                http.open("get", `http://10.35.164.168:81/removelist?id=${id}`);
                http.send()
                http.onreadystatechange = function() {
                    if (http.readyState === 4) {
                        if (http.responseText === "error") {
                            alert("删除失败")
                        } else {
                            alert('删除成功')
                            location.reload()
                        }
                    }

                }
            }
        }

        if (target.innerHTML === "插入") {
            // ajax
            let http = new XMLHttpRequest()
            http.open("get", "http://10.35.164.168:81/addlist")
            http.send()
            http.onreadystatechange = function() {
                if (http.readyState == 4) {
                    console.log(http.responseText);
                    //另一种刷新页面的方式
                    location.reload();
                }
            }
        }
        //  插入键
        // if (target.innerHTML === "插入") {
        //     ajax("get", "http://10.35.164.168:81/addlist", function(data) {
        //         alert(1)
        //         location.reload()

        //     })
        // }
        // 文本框编写
        if (target.tagName === "TD" && target.className !== "edit") {
            let input = document.createElement("input")
            input.value = target.innerHTML;
            target.innerHTML = "";
            target.appendChild(input);
            input.focus();
            input.onblur = function() {
                target.innerHTML = this.value;
                let id = target.parentNode.getAttribute("data-id");
                let key = target.className;
                let value = this.value;
                let http = new XMLHttpRequest();
                http.open("get", `http://10.35.164.168:81/editlist?id=${id}&key=${key}&value=${value}`);
                http.send();
                http.onreadystatechange = function() {
                    if (http.readyState === 4) {
                        if (http.responseText === "error") {
                            console.log("修改失败");
                        }
                        //另一种刷新页面的方式
                    } else {
                        console.log("修改成功")
                    }
                }
            }
            input.onkeydown = function(evt) {
                let e = evt || event;
                if (evt.keyCode === 13) {
                    this.blur();
                }
            }
        }
    }
</script>